<template>
  <div class="box">
    <div class="main">
      <div class="mb20">
        <img src="@/assets/images/teacher.png" alt="" />
      </div>

      <div class="f fw">
        <div class="course-item">
          <img
            src="@/assets/images/source/images/ls2.png"
            alt=""
            width="272"
            height="190"
          />
          <div class="f14 pl10 pr10 pt20 pb10">
            <div class="mb10 text-center">唐迟 武忠祥 刘亚男</div>
            <div class="course-content tem2">
              【26考研】全科新手规划与备考宝典
            </div>
          </div>
        </div>
        <div class="course-item">
          <img
            src="@/assets/images/source/images/ls1.png"
            alt=""
            width="272"
            height="190"
          />
          <div class="f14 pl10 pr10 pt20 pb10">
            <div class="mb10 text-center">孙志岗@产品专家</div>
            <div class="course-content tem2">
              网易AI大模型产品经理「体验满血版DeepSeek，R1模型不限量使用！」
            </div>
          </div>
        </div>
        <div class="course-item">
          <img
            src="@/assets/images/source/images/ls3.png"
            alt=""
            width="272"
            height="190"
          />
          <div class="f14 pl10 pr10 pt20 pb10">
            <div class="mb10 text-center">杨亮</div>
            <div class="course-content tem2">实战速记3500高频词</div>
          </div>
        </div>
        <div class="course-item">
          <img
            src="@/assets/images/source/images/ls4.png"
            alt=""
            width="272"
            height="190"
          />
          <div class="f14 pl10 pr10 pt20 pb10">
            <div class="mb25 text-center">叶梓</div>
            <div class="course-content tem2">
              【摄影的奥秘】零基础摄影入门公开课（0227班Y）
            </div>
          </div>
        </div>
        <div class="course-item">
          <img
            src="@/assets/images/source/images/ls2.png"
            alt=""
            width="272"
            height="190"
          />
          <div class="f14 pl10 pr10 pt20 pb10">
            <div class="mb10 text-center">唐迟 武忠祥 刘亚男</div>
            <div class="course-content tem2">
              【26考研】全科新手规划与备考宝典
            </div>
          </div>
        </div>
        <div class="course-item">
          <img
            src="@/assets/images/source/images/ls4.png"
            alt=""
            width="272"
            height="190"
          />
          <div class="f14 pl10 pr10 pt20 pb10">
            <div class="mb10 text-center">孙志岗@产品专家</div>
            <div class="course-content tem2">
              网易AI大模型产品经理「体验满血版DeepSeek，R1模型不限量使用！」
            </div>
          </div>
        </div>
        <div class="course-item">
          <img
            src="@/assets/images/source/images/ls1.png"
            alt=""
            width="272"
            height="190"
          />
          <div class="f14 pl10 pr10 pt20 pb10">
            <div class="mb10 text-center">杨亮</div>
            <div class="course-content tem2">实战速记3500高频词</div>
          </div>
        </div>
        <div class="course-item">
          <img
            src="@/assets/images/source/images/ls3.png"
            alt=""
            width="272"
            height="190"
          />
          <div class="f14 pl10 pr10 pt20 pb10">
            <div class="mb25 text-center">叶梓</div>
            <div class="course-content tem2">
              【摄影的奥秘】零基础摄影入门公开课（0227班Y）
            </div>
          </div>
        </div>
      </div>

      <div class="f column aie">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="100"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <!-- :hide-on-single-page="value" -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from "@/store/modules/counter.ts";
import { useRouter } from "vue-router";

const counterStore = useCounterStore();
const route = useRouter();
const currentPage = ref(1);
const pageSize = ref(10);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style lang="scss" scoped>
.box {
  background: #f5f7fa;
}
.main {
  width: 1154px;
  margin: 0 auto;
  padding: 100px 0 20px;
  // 内容
  .course-item {
    width: 272px;
    // height: 282px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    color: #6e747a;
    margin-right: 22px;
    margin-bottom: 22px;
    box-shadow: 0 0 10px 3px #e8e8e8;
    &:nth-child(4n) {
      margin-right: 0;
    }
    .course-content {
      line-height: 24px;
      opacity: 0.7;
    }
    &:hover {
      box-shadow: 0 0 5px 2px #f9b7b7;
    }
  }
}
</style>
